<template>
  <div>
    <cm-card>
    <div slot="header">
      <span>一级采购项目创建</span>
    </div>
    <div class="text">
      <cm-tabs v-model="activeName" type="border-card">
        <cm-tab-pane label="项目基础信息" name="first">
          <cm-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            labcm-width="100px"
            class="ruleForm"
          >
            <cm-row type="flex" justify="space-around">
              <cm-form-item label="项目编号" prop="error" >
                <cm-input
                  type="text"
                  v-model="ruleForm.error"
                ></cm-input>
              </cm-form-item>
              <cm-form-item label="项目所处年份" prop="year">
                <cm-input
                  type="text"
                  v-model="ruleForm.year"
                ></cm-input>
              </cm-form-item>
            </cm-row>
            <cm-row type="flex" justify="space-around">
              <cm-form-item label="物资类型" >
                <cm-select v-model="value1" placeholder="请选择">
                  <cm-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
              <cm-form-item label="是否计划采购">
                <cm-select v-model="value2" placeholder="请选择">
                  <cm-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
            </cm-row>
            <cm-row type="flex" justify="space-around">
              <cm-form-item label="物资类型" >
                <cm-select v-model="value1" placeholder="请选择">
                  <cm-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
              <cm-form-item label="是否计划采购">
                <cm-select v-model="value2" placeholder="请选择">
                  <cm-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
            </cm-row>
            <cm-row type="flex" justify="space-around">
              <cm-form-item label="物资类型" >
                <cm-select v-model="value1" placeholder="请选择">
                  <cm-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
              <cm-form-item label="是否计划采购">
                <cm-select v-model="value2" placeholder="请选择">
                  <cm-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
            </cm-row>
            <cm-row type="flex" justify="space-around">
              <cm-form-item label="物资类型" >
                <cm-select v-model="value1" placeholder="请选择">
                  <cm-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
              <cm-form-item label="是否计划采购">
                <cm-select v-model="value2" placeholder="请选择">
                  <cm-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
            </cm-row>

          </cm-form>
        </cm-tab-pane>
        <cm-tab-pane label="产品类型清单" name="second" style="height:300px">产品类型清单</cm-tab-pane>
        <cm-tab-pane label="标准时限计划" name="third" style="height:300px">标准时限计划</cm-tab-pane>
        <cm-tab-pane label="附件清单" name="four" style="height:300px">附件清单</cm-tab-pane>
      </cm-tabs>
    </div>
  </cm-card>
    <div class="operate">
      <cm-button type="default" @click="$router.back()">取消</cm-button>
      <cm-button type='primary' @click="submitForm('ruleForm')">提交</cm-button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "create",
        data(){
          var validateError = (rule, value, callback) => {
            if (this.ruleForm.error === "") {
              callback(new Error("请填写项目编号"));
            } else {
              callback();
            }
          };
          var validateYear = (rule, value, callback) => {
            if (this.ruleForm.year === "") {
              callback(new Error("请填写项目年份"));
            } else {
              callback();
            }
          };
          return {
            value1:'',
            value2:'',
            options: [{
              value: '选项1',
              label: '选择一'
            }, {
              value: '选项2',
              label: '选择二',
              disabled: true
            }, {
              value: '选项3',
              label: '选择三'
            }, {
              value: '选项4',
              label: '选择四'
            }],
            options2: [{
              value: true,
              label: '是'
            }, {
              value: false,
              label: '否',
              disabled: true
            }],
            activeName: 'first',
            ruleForm: {
              error: "",
              year:''

            },
            rules: {
              error: [{ validator: validateError, required:true, trigger: "change" }],
              year: [{ validator: validateYear, required:true, trigger: "change" }],
            }
          }
        },
      methods: {
        submitForm(formName) {
          this.$confirm('提交成功', '提示', {
            confirmButtonText: '查看',
            cancelButtonText: '返回',
            type: 'success'
          })
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
      }
    }
</script>

<style scoped>
  .ruleForm{
  }
  .operate{
    position: fixed;
    bottom:0;
    left: 0;
    right: 0;
    background: #fff;
    height:50px;
    padding-right: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

</style>
